<template>
  <div>
    <template>


      <el-table
          :data="tableData"
          @row-click="testt"
          :row-class-name="tableRowClassName">
        <el-table-column
            prop="processDefinitionName"
            label="审批类型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="startUser.name"
            label="发起人"
            width="180">
        </el-table-column>

        <el-table-column
            prop="startTime"
            label="提交时间"
            width="280">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ formatTime(scope.row.startTime) }}</span>
          </template>
        </el-table-column>

        <el-table-column
            label="任务到达时间"
            :formatter="formatTime"
            width="280">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ formatTime(scope.row.endTime) }}</span>
          </template>
        </el-table-column>

        <el-table-column
            prop="currentActivityName"
            label="当前节点"
            width="180">
        </el-table-column>

        <el-table-column
            prop="businessStatus"
            label="审核状态"
            :formatter="formatBusinessStatus"
            width="180">
        </el-table-column>

        <el-table-column
            prop="duration"
            label="已耗时">
        </el-table-column>

        <el-table-column
            prop="address"
            label="操作">
          <el-button type="primary">再次提交</el-button>
        </el-table-column>
      </el-table>
    </template>
    <el-pagination
        background
        layout="prev, pager, next"
        @current-change="test"
        :current-page="pageNo"
        :total="1000">
    </el-pagination>

    <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        :with-header="false"
        :size="500"
    >
      <!--      改变抽屉的高度-->
      <div style="height: 100%;overflow: scroll;padding-bottom: 150px">
        <div>
          <div class="xi">审批祥情</div>
          <div class="head">
            <div class="head-onw">
              <div class="head-o"><img :src="defaultImg" class="user-avatar"></div>
              <div class="head-h">{{ data2.startUser.name }}</div>
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="head-two">
              <div>
                <span>{{ data2.processDefinitionName }}</span>
                &nbsp;&nbsp;&nbsp;
                <span><el-tag type="success">{{ expecr(data2.businessStatus) }}</el-tag></span>
              </div>
              <div class="head-t">
                编号: &nbsp;&nbsp;{{ data2.processInstanceId }}
              </div>
            </div>
          </div>
          <div class="head-ts"></div>
          <div class="body">
            <div class="body-1">审批类型</div>
            <div class="body-2">{{ data2.processDefinitionName }}</div>
            <div class="body-3">提交时间段</div>
            <div class="body-4">{{ formatTime(data2.startTime) }}</div>
            <div class="body-5">结束时间</div>
            <div class="body-6">{{ formatTime(data2.endTime) }}</div>
            <div class="body-7">已经耗时</div>
            <div class="body-8">{{ data2.duration }}</div>
          </div>
          <div class="head-ts"></div>
          <div class="block">
            <div v-for="apptest in apptest">
              {{ apptest.title }}
              <el-input
                  :rows="5" type="textarea" v-model="apptest.value" class="input"></el-input>
            </div>
          </div>
          <!--                  {{ data2}}-->
        </div>
        <div class="bottom-2"></div>

        <div class="bottom">
          <div class="root">
<!--            <el-dropdown class="bottom-t">-->
<!--  <span class="el-dropdown-link">更多-->
<!--    <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--  </span>-->
<!--              <el-dropdown-menu slot="dropdown">-->
<!--                <el-dropdown-item><i class="el-icon-s-custom"></i>转交</el-dropdown-item>-->
<!--                <el-dropdown-item><i class="el-icon-tickets"></i>退回</el-dropdown-item>-->
<!--                <el-dropdown-item><i class="el-icon-edit-outline"></i>加签</el-dropdown-item>-->
<!--              </el-dropdown-menu>-->
<!--            </el-dropdown>-->
          </div>
<!--          <div class="bottom-3">-->
<!--            <el-button round type="danger" @click="down">拒绝</el-button>-->
<!--          </div>-->
<!--          <div>-->
<!--            <el-button type="primary" round plain class="bottom-1" @click="open">同意</el-button>-->
<!--          </div>-->
        </div>
      </div>

    </el-drawer>
  </div>
</template>

<!--<script>-->

<!--export default {-->
<!--  name: "Pending"-->
<!--}-->
<!--</script>-->
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.xi {
  margin-left: 20px;
  line-height: 50px;
  height: 40px;
  font-size: 18px;
  color: #5a5e66;
}

.head {
  margin-left: 20px;
  display: flex;
  width: 400px;
  height: 100px;
}

.head-h {
  margin-top: 10px;
}

.head-t {
  font-size: 13px;
  margin-top: 10px;
  color: #666666;
}

.user-avatar {
  margin-top: 10px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  vertical-align: middle;
}

.head-two {
  margin-top: 20px;
}

.head-ts {
  height: 15px;
  background-color: #EEEEEE;
}

.el-table .success-row {
  background: #f0f9eb;
}

.body {
  margin-left: 10px;
  border: 1px #da5961;
  height: 220px;
}

.body-1 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666666;
}

.body-2 {
  margin-bottom: 10px;
}

.body-3 {
  font-size: 14px;
  color: #666666;
  margin-bottom: 10px;
}

.body-4 {
  margin-bottom: 10px;
}

.body-5 {
  font-size: 14px;
  color: #666666;
  margin-bottom: 10px;
}

.body-6 {
  margin-bottom: 10px;
}

.body-7 {
  font-size: 14px;
  color: #666666;
  margin-bottom: 10px;
}

.body-8 {

  margin-bottom: 10px;
}

.block {
  margin-top: 15px;
  margin-left: 10px;
}

.bottom {
  display: flex;
  background-color: #ffffff;
  height: 70px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.bottom-1 {
  width: 70px;
  margin-top: 18px;
  margin-right: 10px;
}

.bottom-2 {
  background-color: #EEEEEE;
  height: 123px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;

}

.bottom-3 {
  /*background-color: #da5961;*/
  width: 96px;
  margin-left: 250px;
  margin-top: 18px;
  margin-right: 10px;
}

.bottom-4 {
  width: 50px;
  position: relative;
  left: 270px;
}

/*/deppl/.bottom-4{*/
/*  background-color: #da5961;*/
/*  width: 100px;*/
/*}*/
.el-dropdown-link {
  /*background-color: #da5961;*/
  width: 100px;
  height: 100px;
  font-size: 15px;
  cursor: pointer;
  color: #409EFF;
}

/deep/ .el-icon-arrow-down {
  font-size: 30px;
}

.bottom-t {
  /*background-color: #da5961;*/
  width: 60px;
}

.root {
  /*background-color: #da5961;*/
  position: relative;
  left: 240px;
  width: 100px;
  top: 30px;

}
</style>

<script>
import {applyList, getProcessInstanceInfo} from "@/api/design.js"
import { formatTime ,formatBusinessStatus} from '@/views/util/form'


export default {
  data() {
    return {
      drawer: false,
      tableData: [],
      apptest: [],
      total: 100,
      pageNo: 1,
      pageSize: 10,
      defaultImg: require('@/assets/common/head.jpg'),
      data2: {
        taskId:'',
        processInstanceId:'',
        processDefinitionName:'',
        startUser:{
          id:'',
          name:'',
          type:'',
          sex:'',
          selected:''
        },
        startTime:'',
        taskCreatedTime:'',
        currentActivityName:'',
        businessStatus:'',

      },
    }
  },
  mounted() {
    this.getTodoList()
  },
  methods: {
    formatTime,formatBusinessStatus,
    expecr(res){
      if (res==='1'){
        return "正在处理"
      }else if (res === '2'){
        return "已经撤销"
      }else if (res === '3'){
        return "驳回"
      }else if (res === '4'){
        return "办结"
      }
    },
    testt(res) {
      this.apptest = []
      this.data2 = res
      this.drawer = true
      getProcessInstanceInfo(res.processInstanceId
          , res.taskId).then(rep => {
        let formItems = JSON.parse(rep.data.result.processTemplates.formItems)
        for (let i = 0; i < formItems.length; i++) {
          var formItem = formItems[i];
          let obj = {}
          obj.title = formItem.title
          obj.id = formItem.id
          this.apptest.push(obj)
          obj = {}
        }
        this.formData=(rep.data.result.formData)
        var formItt = (rep.data.result.formData)
        for (let i = 0; i < formItt.length; i++) {
          this.appdst.push(formItt)
        }

        for (const item of this.apptest) {
          if (formItt.hasOwnProperty(item.id)) {
            item.value = formItt[item.id]

          }
        }
      })
    },
    test(val){
      this.pageNo = val
      this.getTodoList()
    },
    getTodoList() {
      const param = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      }
      applyList(param).then(rsp => {
        this.tableData = rsp.data.result.records
        this.total = rsp.data.result.total
      })
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  },

}
</script>

<style scoped>

</style>